<!-- 用户管理组件 -->
<template>
  <div class="Userlist">
    <div class="function">
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <!--<el-input placeholder="请输入用户ID名称" icon="search" v-model="input"></el-input>-->
          </div>
        </el-col>
        <el-col :span="20">
          <el-button >新建用户测试</el-button>
        </el-col>
      </el-row>
    </div>
    <div id="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          label="Index">
          <template scope="scope">
            <span>{{scope.$index}}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="id"
          label="测试ID">
        </el-table-column>
        <el-table-column
          prop="username"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码">
        </el-table-column>
        <el-table-column
          prop="usertype"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="enabled"
          label="是否可用">
        </el-table-column>
        <el-table-column
          prop="realname"
          label="真实姓名">
        </el-table-column>
        <el-table-column
          prop="qq"
          label="QQ">
        </el-table-column>
        <el-table-column
          prop="email"
          label="EMAIL">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="TEL">
        </el-table-column>
        <el-table-column align="center" label="操作" >
          <template scope="scope">
            <el-button @click.native="handleClick(scope.$index)"  size="small">查看</el-button>
            <el-button @click.native="getUserinfo(scope.row)"  size="small">编辑</el-button>
            <el-button @click.native="deleteUserinfo(scope.row,scope.$index)"size="small" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页begin-->
      <el-pagination class="tc mg"
                     :current-page="tableData.pageNum"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="tableData.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableData.pages"
                     @size-change="pageSizeChange"
                     @current-change="pageCurrentChange">
      </el-pagination>
      <!--分页end-->
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { mapActions  } from 'vuex';
  export default {
    computed: mapState({
        tableData: state => state.userlist,
        total:state => state.userlist.total,
    }),
    methods:{
      ...mapActions ({
      }),
      getUserlist(userinfo){
        this.$store.dispatch('getUserlist',userinfo)
      },
      pageSizeChange(size){
        alert(size);
      },
      pageCurrentChange(currentPage){
        alert(currentPage);
      },
      deleteUserinfo(userinfo,index){
        var obj ={};
        obj.userinfo= userinfo;
        obj.index = index;
        this.$store.dispatch('deleteUserinfoById',obj)
      },
      getUserinfo(userinfo){
        this.$store.dispatch('getUserinfoById',userinfo).then(() => {
          var u = this.$store.state.userinfo;
          alert(u.id);
        })
      }
    },
    mounted(){
      var userinfo={};
      userinfo.page=1;
      userinfo.rows=10;
      this.getUserlist(userinfo);
    },
    created() {

    },
  }

</script>

<style media="screen">

</style>
